<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--
From http://fantasai.inkedblade.net/style/specs/css2.1/tests/min-max-replaced
--><html lang="en"><head>
  <title>CSS 2.1 Test Suite: Min/Max Height and Width Constraints on Replaced Elements</title>
  <link href="http://fantasai.inkedblade.net/" rel="author" title="fantasai" />
  <link href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" rel="help" />
  <link rel="match" href="234686-ref.xht"/>
  <meta content="However, for replaced elements with an intrinsic ratio and both 'width' and 'height' specified as 'auto', the algorithm is as follows:" name="assert" />
  <style type="text/css">

    /* Diagrams are scaled so that w and h line up.
       Image is 75px x 75px; target dimensions will thus be 75px. */

    /* (w &gt; max-width) and (h &gt; max-width)
     * (wmax/w &lt; hmax/h) and (wmax/w &gt; hmin/h)
     *
     *             wmax                  w
     * |-------------+-------------------+--------&gt; width 
     *         hmin            hmax      h
     * |---------+---------------+-------+--------&gt; height
     *
     * target: [wmax, wmax * h/w]
     */

    #img13 { max-width:   75px; /* 30% */
             min-height:  25px; /* 10% */  
             max-height: 225px; /* 90% */}

  </style>
 </head>
 <body>
   <p><img alt="" id="img13" src="234686-13.gif" /></p> <!-- w=250  h=250 -->

 

</body></html>
